import React from 'react';
import { inject, observer } from 'mobx-react';
import * as mobx from 'mobx';
import { Tabs,Accordion,List,Avatar,PullToRefresh } from 'weaver-mobile';
import { _ } from '../../util/pcPublic';
import { getLabel, formOpenHrmCard, formOpenCrmCard } from '../../util/common';

@inject('wfStatusStore')
@observer
export default class Status extends React.Component{
    constructor(props){
        super(props);
    }
    componentDidMount(){
        const { wfStatusStore,params } = this.props;
        wfStatusStore.setBaseParam({requestid: params.requestid,f_weaver_belongto_userid: params.f_weaver_belongto_userid,f_weaver_belongto_usertype: params.f_weaver_belongto_usertype});
        wfStatusStore.loadCounts();
        wfStatusStore.switchCard('all');
    }
    render(){
        const { wfStatusStore } = this.props;
        const { cardid,dataMap } = this.props.wfStatusStore;
        const tabs = this.getTopTabs();
        return (
            <div className="wf-req-status">
                <Tabs
                    tabs={tabs}
                    initialPage={0}
                    onChange={tab => wfStatusStore.switchCard(tab.cardid)}
                >
                    {
                        tabs.map(item =>{
                            return this.renderCardContent(item.cardid);
                        })
                    }
                </Tabs>
            </div>
        )
    }
    getTopTabs(){
        const tabs = [];
        const cardInfo = [
            {id:'all', title:getLabel(500281,'总人次'), color:'#55B1F9'},
            {id:'submit', title:getLabel(15176,'已提交'), color:'#32D07A'},
            {id:'nosubmit', title:getLabel(15178,'未提交'), color:'#DC2EFF'},
            {id:'view', title:getLabel(18006,'已查看'), color:'#00C7FF'},
            {id:'noview', title:getLabel(18007,'未查看'),  color:'#FF2E3D'}
        ];
        const { counts } = this.props.wfStatusStore;
        cardInfo.map(item =>{
            const key = item.id;
            const tab = (
                <div className="wf-req-status-tab">
                    <div className="wf-req-status-tab-num" style={{color:item.color}}>{counts[`${key}count`]}</div>
                    <div style={{color:"#868686"}}>{item.title}</div>
                </div>
            )
            tabs.push({cardid:key, title: tab});
        });
        return tabs;
    }
    renderCardContent(cardid){
        const { wfStatusStore } = this.props;
        const { dataMap,spreadMap } = wfStatusStore;
        const cardDatas = mobx.toJS(dataMap.get(cardid)) || {};
        const spreadKeys = mobx.toJS(spreadMap.get(cardid));
        const cardOrderKeys = Object.keys(cardDatas).sort((a,b) =>{
            return parseInt(a.substring(3)) - parseInt(b.substring(3));
        });
        const nodeItems = [];
        cardOrderKeys.map(nodeKey =>{
            const nodes = cardDatas[nodeKey];
            if(nodes.list.length > 0){
                nodeItems.push(
                    <Accordion.Panel key={nodeKey} header={`${nodes.nodename}(${nodes.listcount})`}>
                        {
                            this.renderNodeContent(nodes)
                        }
                    </Accordion.Panel>
                )
            }
        });
        return (
            <div key={cardid} className="wf-req-status-content">
                <PullToRefresh
                    damping={60}
                    style={{height: '100%', overflow: 'auto'}}
                    indicator={{deactivate: '上拉可以刷新'}}
                    direction={'up'}
                    refreshing={false}
                    onRefresh={() => {
                        wfStatusStore.loadData(false);
                    }}
                >
                    <Accordion activeKey={spreadKeys} onChange={key => wfStatusStore.controlSpreadDatas(key)}>
                        { nodeItems }
                    </Accordion>
                </PullToRefresh>
            </div>
        )
    }
    renderNodeContent(nodes){
        const arr = [];
        nodes.list.forEach((item,index) => {
            let statusName = "";
            let statusColor = "#55B1F9";
            const {statuscode} = item;
            switch(Number(statuscode)){
                case 1 :
                    statusName = getLabel(18007,'未查看');
                    statusColor = "#E26E3E";
                    break;
                case 2 :
                    statusName = getLabel(18006,'已查看');
                    statusColor = "#2BBDC2";
                    break;
                case 3 :
                    statusName = getLabel(15176,'已提交');
                    statusColor = "#32D07A";
                    break;
                case 4 :
                    statusName = getLabel(20387,'暂停');
                    break;
                case 5 :
                    statusName = getLabel(16210,'撤销');
                    break;
                case 6 :
                    statusName = getLabel(26472,'启用');
                    break;
                case 7:
                    statusName = getLabel(505288,'已查阅');
                    statusColor = "#32D07A";
                    break;
                default :
                    statusName = ""
            }
            let infoArr = [];
            if(item.receivedate){
                const receiveArr = item.receivedate.split(' ');
                infoArr.push({
                    type : getLabel(18002,'接收时间'),
                    date : receiveArr[0],
                    time : receiveArr[1]
                });
            }
            if(item.operatedate && item.operatedate !== ' '){
                const operateArr = item.operatedate.split(' ');
                infoArr.push({
                    type : getLabel(15502,'操作时间'),
                    date : operateArr[0],
                    time : operateArr[1]
                });
            }
            const hasIntervel = _.trim(item.intervel || "") !== "";
            const operatorImg = item.operatorImg || "/messager/images/icon_m_wev8.jpg";
            const operatorImgDefName = item.operatorImgDefName || "";
            const operatorName = [];
            if(!!item.beagentid){    //存在代理
                operatorName.push(<span className="user-name-click" key="beagentname" onClick={() => {
                    if(item.operatortype == '1') {
                        formOpenCrmCard(item.beagentid);
                    } else {
                        formOpenHrmCard(item.beagentid);
                    }
                }}>{item.beagentname}</span>);
                operatorName.push(<span key="connect" className="wf-req-status-connect-symbol">-></span>);
            }
            operatorName.push(<span className="user-name-click" key="operator" onClick={() => {
                if(item.operatortype == '1') {
                    formOpenCrmCard(item.operatorid);
                } else {
                    formOpenHrmCard(item.operatorid);
                }
            }}>{item.operator}</span>);
            arr.push(
                <List.Item key={`listitem_${index}`}>
                    <div className="wf-req-status-listitem">
                        <div className='wf-req-status-listitem-operator'>
                            <Avatar url={operatorImg} name={operatorImgDefName} />
                        </div>
                        <div className="wf-req-status-listitem-desc">
                            <div>
                                    <span className='wf-req-status-listitem-operator-name' style={{color:'#333333',marginRight:'10px'}}>{operatorName}</span>
                                    <span  className="wf-req-status-listitem-mark" style={{borderColor:statusColor, color:statusColor}}>{statusName}</span>
                            </div>
                            {
                                infoArr.map((item,index) => {
                                    return (
                                        <div key={index}>
                                            <span style={{marginRight:'10px'}}>{item.type}：</span>
                                            <span style={{color:'#333333',marginRight:'10px'}}>{item.date}</span>
                                            <span>{item.time}</span>
                                        </div>
                                    )
                                })
                            }
                            {
                                hasIntervel && <div>
                                    <span style={{marginRight:'10px'}}>{getLabel(19079,"耗时")}：</span>
                                    <span>{item.intervel}</span>
                                </div>
                            }
                        </div>
                    </div>
                </List.Item>
            )
        })
        return arr;
    }
}